<script setup lang="ts">
import { ref, onMounted } from 'vue'
import axios from 'axios'

declare global {
  interface Window {
    pywebview: { api: any },
    debug: (text: string, type: any) => void
  }
}
// 定义注册码和附加码的引用
const registrationCode = ref('')
const additionalCode = ref('')
const dmPort = ref(8765)
const QSName = ref('华泰证券')
const QSExchangeAppPath = ref('') // 交易软件路径
const QSAccount = ref('')
const QSPassword = ref('')

// 加载设置
const loadSettings = async () => {
  try {
    const settings = await window.pywebview.api.read_settings()
    registrationCode.value = settings.大漠插件.注册码
    additionalCode.value = settings.大漠插件.附加码
    dmPort.value = settings.WebDM.port || 8765
    QSName.value = settings.券商.名称
    QSAccount.value = settings.券商.账号
    QSPassword.value = settings.券商.交易密码
    QSExchangeAppPath.value = settings.WebDM.path
  } catch (error) {
    console.log('加载失败，如果未设置settings.yaml文件，可以忽略:', error)
  }
}

// 保存设置
const saveSettings = async () => {
  try {
    const success = await window.pywebview.api.save_settings({
        大漠插件: {
          注册码: registrationCode.value,
          附加码: additionalCode.value
        },
        WebDM: {
          port: dmPort.value,
          path: QSExchangeAppPath.value
        },
        券商: {
          名称: QSName.value,
          账号: QSAccount.value,
          交易密码: QSPassword.value
        }
      }
    )
    if (success) {
      alert('保存成功！')
    } else {
      alert('保存失败！')
    }
  } catch (error) {
    console.error('保存失败:', error)
    alert('保存失败！')
  }
}

const testDamo = async () => {
  await window.pywebview.api.start_damo(registrationCode.value, additionalCode.value, String(dmPort.value))
  const res = await axios.get(`http://localhost:${dmPort.value}/Reg/${registrationCode.value}/${additionalCode.value}`)
  if (res.status === 200) {
    if (res.data === 'OK') {
      alert('大漠插件测试成功！')
    } else {
      alert('大漠插件测试失败！')
    }
  } else {
    alert('WebDM启动失败，请手动运行WebDM.exe后重试')
  }
}

// 组件加载时读取 settings.yaml 文件
onMounted(() => {
  loadSettings()
})


</script>

<template>
  <div class="size-full p-2">
    <div class="w-full grid grid-cols-1 gap-2">
      <div>
        <button @click="loadSettings">读取配置信息</button>
        <button @click="saveSettings">保存配置信息</button>
        <button @click="testDamo">测试大漠插件</button>
      </div>
      <div>
        大漠插件
      </div>
      <div class="bg-red-50 flex">
        <div class="w-10"></div> <!-- 占位指定宽度 -->
        <div class="flex-1 bg-red-50 grid grid-cols-10 min-w-0">
          <label class="self-center font-medium text-gray-700 col-span-2">
            注册码：
          </label>
          <input type="text" class="col-span-8 bg-white border-1 px-1" v-model="registrationCode">
        </div>

      </div>
      <div class="bg-red-100 flex">
        <div class="w-10"></div> <!-- 占位指定宽度 -->
        <div class="flex-1 grid grid-cols-10">
          <label class="self-center font-medium text-gray-700 col-span-2">
            附加码：
          </label>
          <input type="text" class="col-span-8 bg-white border-1 px-1" v-model="additionalCode">
        </div>
      </div>
      <div class="bg-red-100 flex">
        <div class="w-10"></div> <!-- 占位指定宽度 -->
        <div class="flex-1 grid grid-cols-10">
          <label class="self-center font-medium text-gray-700 col-span-2">
            WebDM路径：
          </label>
          <input type="text" class="col-span-8 bg-white border-1 px-1" v-model="QSExchangeAppPath">
        </div>
      </div>
      <div class="bg-red-100 flex">
        <div class="w-10"></div> <!-- 占位指定宽度 -->
        <div class="flex-1 grid grid-cols-10">
          <label class="self-center font-medium text-gray-700 col-span-2">
            WebDM服务端口：
          </label>
          <input type="text" class="col-span-8 bg-white border-1 px-1" v-model="dmPort">
        </div>
      </div>
      <div>
        证券账户
      </div>
      <div class="bg-red-50 flex">
        <div class="w-10"></div> <!-- 占位指定宽度 -->
        <div class="flex-1 bg-red-50 grid grid-cols-10 min-w-0">
          <label class="self-center font-medium text-gray-700 col-span-2">
            券商名：
          </label>
          <input type="text" class="col-span-8 bg-white border-1 px-1" v-model="QSName">
        </div>

      </div>
      <div class="bg-red-100 flex">
        <div class="w-10"></div> <!-- 占位指定宽度 -->
        <div class="flex-1 grid grid-cols-10">
          <label class="self-center font-medium text-gray-700 col-span-2">
            账号（客户号）：
          </label>
          <input type="text" class="col-span-8 bg-white border-1 px-1" v-model="QSAccount">
        </div>
      </div>
      <div class="bg-red-100 flex">
        <div class="w-10"></div> <!-- 占位指定宽度 -->
        <div class="flex-1 grid grid-cols-10">
          <label class="self-center font-medium text-gray-700 col-span-2">
            交易密码：
          </label>
          <input type="text" class="col-span-8 bg-white border-1 px-1" v-model="QSPassword">
        </div>
      </div>
    </div>

  </div> <!-- 类中不能添加container，因为container是tailwindcss的默认容器类，会限制最大宽度 -->
</template>

<style scoped>
button {
  background-color: #f5c6cb;
  border-radius: 5px;
  padding: 2px 20px 2px 20px;
  margin: 5px;
  width: 200px;
}

button:hover {
  background-color: #646cff;
}
</style>